﻿<div class="filters">
    <form class="custom" onsubmit="return false;" autocomplete="off">
        <div class="row collapse">
            <div class="large-2 columns">
                <a href="javascript:void(0)" class="button secondary" data-bind="modalOpen: 'tableRecordDetails', click: function () { $parent.recordView.forTable($data.schema()) }">Insert&nbsp;a&nbsp;record</a>
            </div>
            <div class="large-1 columns">
                <label for="tableRecordsFilter" class="right inline">Filter:&nbsp;</label>
            </div>
            <div class="large-7 columns">
                <div class="query-builder-input">
                    <input id="tableRecordsFilter" type="text" autocomplete="off"
                        data-bind="instantValue: filter, enterPressed: applyFilter, css: { error: filterInput.invalid }, title: filterInput.errorMessage, mruOptions: filters().items(), mruSelect: function (ev, f) { filter(f); applyFilter(); }" placeholder="PartitionKey eq 'pkey' and RowKey eq 'rkey'" />
                    <a href="javascript:void(0)" class="query-open" data-bind="modalOpen: 'tableQueryBuilder', click: function () { $parent.queryBuilder.init(queryBuilderFilter) }">edit</a>
                </div>
            </div>
            <div class="large-1 columns">
                <a href="javascript:void(0)" class="button secondary postfix" data-bind="click: applyFilter">Apply</a>
            </div>
            <div class="large-1 columns">
                <a class="settings button secondary" data-bind="modalOpen: 'tableSettings', click: $parent.tableSettingsDetails.initFromCurrent">
                    <span aria-hidden="true" class="icon-settings"></span>
                </a>
            </div>
        </div>
    </form>
</div>
